<template>
  <el-form :model="form" class="my-search" @submit.native.prevent="handleSearch">
    <el-row :gutter="20">
      <el-col v-for="(item, index) in formItems" :key="index" :span="item.span || 8" id="mySearch">
        <el-form-item :label="item.label" :prop="item.prop" :label-width="item.labelWidth || '80px'">
            <component v-if="!item.slot" :is="item.type" v-model="form[item.prop]" v-on="$listeners" v-bind="$attrs" :options="item.options"
              :placeholder="item.placeholder" @change="handleChange(index, $event)">
              <template v-if="item.type === 'el-select'">
                <el-option
                  v-for="items in item.options"
                  :key="items.value"
                  :label="items.label"
                  :value="items.value">
                </el-option>
              </template>
            </component>
            <slot name="custom-slot" v-else :data="item"></slot>
        </el-form-item>
      </el-col>
      <div class="ml-25">
        <el-button  type="primary" @click="handleSearch">搜索</el-button>
        <el-button type="primary" plain @click="handleReset">重置</el-button>
        <el-button v-show="collapsiable" type="text" :icon="fold ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" @click="shiftCollapsiable">{{ fold ? '收起' : '展开' }}</el-button>
      </div>
    </el-row>
  </el-form>
</template>

<script>
export default {
  name: 'MySearch',
  props: {
    formItems: {
      type: Array,
      default: () => []
    },
    // 最大展示数，默认3个，超过则隐藏，为0时不限制
    maxShow: {
      type: Number,
      default: 3,
    },
    size: {
      type: String,
      default: 'small',
    },
  },
  data() {
    return {
      form: {},
      collapsiable: false,
      fold: false,
    };
  },
  methods: {
    shiftCollapsiable() {
      this.fold = !this.fold
      this.minShowCtrol()   
    },
    // 通过maxShow控制元素显示/折叠
    minShowCtrol() {
      console.log('minShowCtrol');
      const group = window.document.querySelectorAll(`#mySearch .el-form-item`)
      const len = group?.length ? group?.length : 0
      console.log("🚀 ~ minShowCtrol ~ len:", len)
      console.log("🚀 ~ minShowCtrol ~ group:", group)
      if (this.maxShow < len) {
        group.forEach((item, index) => {
          if (index > this.maxShow - 1 && index < len) {
            item.hidden = !this.fold
          }
        })
        this.collapsiable = true
      } else {
        this.collapsiable = false
      }
    },
    handleReset() {
      // 重置表单  
      this.formItems.forEach(item => {
        this.$set(this.form, item.prop, ''); // 清除每个表单项的值  
      });
      // 如果需要，可以在这里触发一个事件来通知父组件表单已被重置  
      // this.$emit('reset');  
    },
    handleChange(index, value) {
      // 可以在这里处理变化，如清空其他表单项  
      console.log(`Item ${index} changed to:`, value);
    },
    handleSearch() {
      this.$emit('search', this.form);
    }
  },
  created() {
    // 初始化form对象  
    this.formItems.forEach(item => {
      this.$set(this.form, item.prop, '');
    });
  },
  mounted() {
    // 通过最大显示个数控制展开/折叠
    if (this.maxShow > 0) {
      this.minShowCtrol()
    }
  },
};  
</script>

<style scoped>
.search-bar {
  /* 样式 */
}
</style>